<template>
	<view class="page">
		<view>
			<view style="margin: auto;width: 100%;padding-top: 30rpx;text-align: center;">
				<image src="https://img.xieling.top/103.jpg" mode="widthFix" style="width: 500rpx;margin: auto;"></image>
			</view>
			<view style="margin: auto;width: 100%;margin-top: 30rpx;text-align: center;position: relative;">
				<image src="https://img.xieling.top/104.jpg" mode="widthFix" style="width: 700rpx;margin: auto;"></image>
				<view style="position: absolute;top: 140rpx;bottom: 0;left: 0;right: 0;">
					<view style="font-size: 42rpx;font-weight: bold;">唐·十二辰·鼠首俑</view>
					<view class="crad-tip">
						<view class="tip-overall">
							AC编码生成中...
						</view>
					</view>
					<view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		<view>
			<view>
				<view style="display: flex;margin: auto;justify-content: center;">
					<u-icon name="checkmark-circle-fill" color="#97d77f" size="24"></u-icon>
					<text style="font-weight: bold;margin-left: 20rpx;">交易成功</text>
				</view>
				<view style="margin-top: 20rpx;font-size: 28rpx;text-align: center;opacity: 0.6;">
					数字藏品正在发放中,稍后可在"我的"中查看
				</view>
			</view>
			
			<view style="display: flex;justify-content: space-around;width: 90%;margin: auto;margin-top: 50rpx;">
				<view>
					<view style="background-color: #1f1f1f;border-radius: 50rpx;text-align: center;color: #000000;width: 250rpx;padding: 10rpx 0;
					display: flex;justify-content: center;align-items: center;">
						<image src="https://img.xieling.top/110.png" mode="widthFix" style="width: 32rpx;"></image>
						<view style="padding-left: 10rpx;color: #fff;">订单详情</view>
					</view>
				</view>
				<view>
					<view style="width: 250rpx;padding: 10rpx 0;background-color: #f6dfbd;border-radius: 50rpx;text-align: center;color: #000000;">
						完成
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.page{
		width: 100%;
		height: 100%;
		background-color: #0c0e0d;
		position: absolute;
		color: #FFFFFF;
		margin: 0;
	}
	.crad-tip{
		display: flex;
		text-align: center;
		margin-top: 20rpx;
		justify-content: center;
	}
	.tip-overall{
		height: 40rpx;
		background-color: #f3e0bc;
		color: #2B2C2E;
		font-size: 22rpx;
		font-weight: 600;
		line-height: 40rpx;
		padding: 0rpx 10rpx;
		border-radius: 5rpx;
		margin-right: 10rpx;
	}
	.tip-half{
		height: 40rpx;
		background-color: #f3e0bc;
		font-size: 22rpx;
		line-height: 40rpx;
		border-radius: 5rpx;
		
	}
	.tip-half-neo{
		background-color: #f3e0bc;
		height: 40rpx;
		color: #2B2C2E;
		font-size: 22rpx;
		font-weight: 600;
		line-height: 40rpx;
		padding: 0rpx 10rpx;
		
		
	}
	.tip-on{
		margin-left: 10rpx;
		background-color: #4b4b4b;
		color: #dcd8bd;
		font-size: 22rpx;
		line-height: 40rpx;
		height: 40rpx;
		padding: 0rpx 10rpx;
		border-radius: 5rpx;
	}
	.tip-half-two{
		background-color: #4b4b4b;
		color: #dcd8bd;
		font-size:22rpx;
		line-height: 40rpx;
		height: 40rpx;
		padding: 6rpx 10rpx;
	}
</style>
